<template>
  <div class="page">
    <div class="login">
      <img class="logo" src="@/assets/logo.png" />
      <div class="title">
        <div class="zh-cn">天章集团采购中台</div>
      </div>

      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="userName">
          <el-input v-model="form.userName" prefix-icon="el-icon-user" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入登录密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>

    </div>

    <div class="footer">Powered by 珠海乐活公社网络科技有限公司</div>
  </div>
</template>

<script>
import { login } from '@/api/platform';
import User from '@/store/user';

export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      form: {
        userName: '',
        password: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入用户名称',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入登录密码',
          },
        ],
      },
    };
  },
  methods: {
    onSubmit () {
      this.$refs.form.validate(async valid => {
        console.log('valid', valid);
        if (valid) {
          try {
            this.loading = true;
            const result = await login(this.form);
            await User.initLoginState(result.loginInfo);
            this.$router.replace('/admin');
          } finally {
            this.loading = false;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f0f2f5;
  width: 100vw;
  height: 100vh;
}
.login {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  padding: 50px;
  box-shadow: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px 0;
  background-color: #fff;
}
.logo {
  width: 200px;
  margin: 0 auto;
  display: block;
}
.title {
  text-align: center;
  color: #c91523;
  font-size: 36px;
  margin: 30px 0;
  .en {
    font-size: 50%;
  }
}

.el-button {
  width: 100%;
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  // padding: 0 16px;
  padding: 48px 0 24px;
  text-align: center;
}
</style>
